<template>
  <view v-if="showList" :style="theme">
    <view class="tabs">
      <!-- #ifdef MP-WEIXIN -->
      <u-navbar :placeholder="true">
        <view slot="left" class="nav_title">
          <text style="z-index: 10">进出场</text>
        </view>
      </u-navbar>
      <!-- #endif -->
      <view class="flex">
        <view
          v-if="shopHome == 1 && venueInfo && venueInfo.name"
          @click="show = true"
          style="width: 50%; box-sizing: border-box; padding-left: 20rpx"
          class="f30 c3 fwb flex"
        >
          {{ venueInfo.name }}
          <u-icon name="arrow-right" size="28rpx" color="#333"></u-icon>
        </view>
        <view class="flex-1">
          <u-tabs
            :list="tabList"
            lineHeight="1"
            :scrollable="false"
            :activeStyle="{
              fontWeight: 'bolder',
              fontSize: '28rpx',
              color: '#222222',
            }"
            :inactiveStyle="{ fontSize: '28rpx' }"
            @click="tabclick"
            :current="active"
          ></u-tabs>
        </view>
      </view>
    </view>
    <view v-if="active == 0" class="u-warning warning_title mt20"
      >显示当前时间可用进场凭证,未到开始时间、过期或未生效凭证不显示</view
    >
    <view class="box" v-if="list && list.length != 0">
      <view v-if="active == 0" class="box_piao">
        <view class="box_piao_item" v-for="(item, index) in list" :key="index">
          <view
            class="zbx"
            :class="item.type == '42' ? 'ck' : item.type == '32' ? 'cd' : ''"
          ></view>
          <image
            class="box_piao_item_i"
            :src="imgHost + '/jinchu_ic_ticket.png'"
          ></image>
          <view class="box_piao_item_h">
            <view class="box_piao_item_h_left">
              <view>
                {{ item.name }}
                <!-- #ifdef MP -->
                <button
                  v-if="item.type == '32' || item.type == '42'"
                  class="share shares"
                  open-type="share"
                  :data-data="item"
                  style="margin-left: 10rpx"
                >
                  <image :src="imgHost + '/ticket_ic_share.png'"></image>
                  <text>分享</text>
                </button>
                <!-- #endif -->
              </view>
              <view>
                {{ item.itemName ? item.itemName : ""
                }}{{ item.areaName ? " | " + item.areaName : ""
                }}{{ item.siteModelName ? " | " + item.siteModelName : "" }}
              </view>
              <button class="share" v-if="item.useTime">
                使用时间：{{ item.useTime }}
              </button>
              <view v-if="!item.useTime && item.residueDegree">
                使用情况：{{
                  item.mealsType === "1"
                    ? item.expirationTime + "过期"
                    : "剩余" +
                      item.residueDegree +
                      "次 | " +
                      item.expirationTime +
                      "过期"
                }}
              </view>
              <view
                class="share"
                v-if="
                  !item.useTime && !item.residueDegree && item.expirationTime
                "
              >
                使用情况：{{ item.expirationTime + "过期" }}
              </view>
            </view>
            <view
              class="box_piao_item_h_right"
              @click="jumpCode(item.code, index)"
            >
              <image :src="imgHost + '/jinchu_ic_saoma.png'"></image>
              <text>扫码</text>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="box_piao">
        <view class="box_piao_item" v-for="(item, index) in list" :key="index">
          <view
            class="zbx"
            :class="item.type == '42' ? 'ck' : item.type == '32' ? 'cd' : ''"
          ></view>
          <image
            class="box_piao_item_i"
            :src="imgHost + '/jinchu_ic_ticket.png'"
          ></image>
          <view class="box_piao_item_h">
            <view class="box_piao_item_h_left">
              <view>
                {{ item.name }}
                <!-- #ifdef MP -->
                <button
                  v-if="item.type == '32' || item.type == '42'"
                  class="share shares"
                  open-type="share"
                  :data-data="item"
                  style="margin-left: 10rpx"
                >
                  <image :src="imgHost + '/ticket_ic_share.png'"></image>
                  <text>分享</text>
                </button>
                <!-- #endif -->
              </view>
              <view>
                {{ item.itemName ? item.itemName : ""
                }}{{ item.areaName ? " | " + item.areaName : ""
                }}{{ item.siteModelName ? " | " + item.siteModelName : "" }}
              </view>
              <view class="share" v-if="item.inTime" style="margin-top: 10rpx">
                入场时间：{{ item.inTime
                }}{{
                  item.timeOut ? " 已超时" + item.timeOut + "分钟" : ""
                }}</view
              >
              <view
                style="margin-top: 10rpx"
                v-if="item.validName && item.validValue"
              >
                {{ item.validName }}：{{ item.validValue }}
              </view>
            </view>
            <view
              class="box_piao_item_h_right"
              @click="jumpCode(item.code, index)"
            >
              <image :src="imgHost + '/jinchu_ic_saoma.png'"></image>
              <text>扫码</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="list.length === 0" class="no-order">
      <image :src="imgHost + '/default_nodata.png'"></image>
      <view>暂无数据～</view>
    </view>
    <u-picker
      :defaultIndex="defaultIndex"
      :show="show"
      :columns="venueList"
      keyName="name"
      @confirm="confirm"
      @cancel="show = false"
    ></u-picker>
  </view>
</template>
<script>
// #ifdef H5
import wx from "@/common/jweixin.js";
// #endif
export default {
  data() {
    return {
      defaultIndex: [0],
      show: false,
      tabList: [
        {
          key: "2",
          name: "进场",
        },
        {
          key: "3",
          name: "出场",
        },
      ],
      showList: false,
      venueInfo: {},
      venueList: [],
      active: 0,
      list: [],
    };
  },
  methods: {
    jump(url, params, a) {
      this.$app.jump(url, params, a);
    },
    jump2(url, params, a) {
      this.$app.jump2(url, params, a);
    },
    jumpCode(code, index) {
      if (this.venueInfo && this.venueInfo.name) {
        this.jump(
          "/pages/venue/ewm?code=",
          code + "&venName=" + this.venueInfo.name
        );
      } else {
        // console.log(index, "=======224");
        let name = this.list[index].name;
        let time = "";
        if (this.list[index].typeName == "套餐") {
          time = this.list[index].expirationTime + " 过期";
        } else {
          console.log(this.active, "=======231");
          if (this.active == 1) {
            time = this.list[index].validValue || "-";
          } else {
            time = this.list[index].useTime || "-";
          }
        }

        this.jump(
          "/pages/venue/ewm?code=",
          code + "&name=" + name + "&time=" + time
        );
      }
    },
    getCG() {
      this.$app
        .ajax({
          data: {
            param: {
              openStatus: "1",
            },
          },
          api: this.$api.getVenue(),
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            let arr = res.recordList;
            let index = 0;
            if (this.venueInfo) {
              arr.forEach((e, dex) => {
                if (e.id === this.venueInfo.id) {
                  index = dex;
                }
              });
            }
            this.venueList = [res.recordList];
            this.venueInfo = res.recordList[index];
            this.getList();
          }
        })
        .catch(() => {});
    },
    confirm(e) {
      this.venueInfo = this.venueList[0][e.indexs[0]];
      this.show = false;
      this.getList();
    },
    // 发起获取signature请求
    getSignature() {
      var url = location.href.split("#")[0];
      this.$app
        .ajax({
          data: {
            param: {
              path: url,
            },
          },
          api: this.$api.wxpConfig(),
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            this.setShare(res.record);
          }
        })
        .catch(() => {});
    },
    // 设置分享数据
    setShare(signature) {
      let that = this;
      var url = location.href.split("?")[0];
      uni.setStorageSync("signature", JSON.stringify(signature));

      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        // 配置微信 JSSDK
        appId: signature.appId, // 必填，公众号的唯一标识
        timestamp: signature.timestamp, // 必填，生成签名的时间戳
        nonceStr: signature.nonceStr, // 必填，生成签名的随机串
        signature: signature.signature, // 必填，签名
        jsApiList: [
          "scanQRCode",
          "checkJsApi",
          "chooseImage",
          "updateAppMessageShareData",
          "updateTimelineShareData",
        ],
      });

      wx.ready(function () {
        console.log("这是分享功能");
        wx.updateAppMessageShareData({
          // imgUrl: that.fxImg, // 分享图标
          title: "进出场", // 分享标题
          desc: that.cont.name, // 分享描述
          link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          success: function () {
            console.log("我来分享了");
          },
        });
        wx.updateTimelineShareData({
          title: "进出场", // 分享标题
          desc: that.cont.name, // 分享描述
          link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          // imgUrl: that.fxImg, // 分享图标
          success: function () {
            console.log("我来分享了");
          },
        });
      });
      wx.error((res) => {
        console.log(res);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        // that.getSignature()
      });
    },
    //分享
    shareBtn() {
      // 	const _signature = uni.getStorageSync('signature')
      // 	// 先看看缓存里有没有
      // 	if (_signature) {
      // 		let signature = JSON.parse(_signature)
      // 		// 获取当前时间戳
      // 		var now = parseInt(new Date().getTime() / 1000) + ''
      // 		// 计算两个时间戳之间的差值，单位为秒
      // 		var diff = now - signature.expire_time
      // 		// 判断差值是否大于2小时的秒数，即7200秒
      // 		if (diff > 7200) {
      // 			console.log('时间戳已经超过两小时。')
      // 			this.getSignature()
      // 		} else {
      // 			console.log('时间戳未超过两小时。')
      // 			this.setShare(signature)
      // 		}
      // 	} else {
      // 		this.getSignature()
      // 	}
    },
    tabclick(e) {
      this.active = e.index;
      this.getList();
    },
    // 进出场列表
    getList() {
      this.showList = true;
      this.$app
        .ajax({
          api: this.$api.accessCode(),
          data: {
            userId: this.userInfo.id,
            param: {
              stadiumId: this.shopHome == 1 ? this.venueInfo.id : this.venueId,
              lat: "",
              flag: this.active || 0,
              lng: "",
            },
          },
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            this.list = res.recordList || [];
          }
        })
        .catch(() => {});
    },
  },
  onShareAppMessage(e) {
    if (e.from == "button") {
      let a = e.target.dataset.data;
      let name = a.name;
      let venueName = this.venueName;
      let time = a.useTime || a.expirationTime + "过期";
      let stra = a.itemName || "";
      let strb = a.areaName || "";
      let strc = a.siteModelName || "";
      let xm = stra + " | " + strb + " | " + strc;
      let title = this.userInfo.nickName + "分享给您的进出场凭证";
      let imageUrl = this.imgHost + "/img_share.png";
      return {
        title: title,
        path: `/pages/venue/receive?id=${a.code}&name=${name}&time=${time}&venueName=${venueName}&xm=${xm}`,
        imageUrl: imageUrl,
      };
    } else {
      return {
        title: "进出场",
        path: "/pages/venue/entranceAndExit", // 路径，传递参数到指定页面。
      };
    }
  },
};
</script>
<style scoped lang="scss">
.warning_title {
  padding: 0 32rpx;
  margin-bottom: -10rpx;
}
.tabs {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
}

.box_tabls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background: #ffffff;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
}

.box_tabls_right {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $bjColor;
}

.box_tabls_left {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
}

.box_tabls_left_item {
  padding: 0 46rpx;
  line-height: 70rpx;
  border-radius: 35rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #111111;
  background: $bjColor;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
}

.active {
  color: #ffffff !important;
  background: $color !important;
}

.box_piao {
  padding: 24rpx 30rpx;
  box-sizing: border-box;
}

.box_piao_item {
  position: relative;
  width: 100%;
  margin-bottom: 25rpx;
  overflow: hidden;
  border-radius: 10rpx;
}

.box_piao_item_i {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  bottom: 0;
  right: 0;
}

.box_piao_item_h {
  width: 100%;
  z-index: 10;
  flex: 1;
  padding: 30rpx 0 30rpx 30rpx;
  box-sizing: border-box;
}

.box_piao_item_h {
  display: flex;
  justify-content: space-between;
}

.box_piao_item_h_left {
  width: 76%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box_piao_item_h_left .share {
  font-size: 24rpx;
  font-weight: 400;
  color: #666666;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  padding: 0;
}

.box_piao_item_h_left .share text {
  color: $color;
}

.box_piao_item_h_left .share::after {
  border: none;
}

.box_piao_item_h_left image {
  width: 22rpx;
  height: 22rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;
  vertical-align: middle;
}

.shares {
  display: inline;
  width: 100rpx;
}

.box_piao_item_h_right {
  width: 24%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.box_piao_item_h_right image {
  width: 60rpx;
  height: 60rpx;
}

.box_piao_item_h_right view {
  font-size: 20rpx;
  font-weight: 400;
  color: #333333;
  margin-top: 10rpx;
}

.box_piao_item_h_left view:nth-child(1) {
  font-size: 32rpx;
  font-weight: 500;
  color: #222222;
}

.box_piao_item_h_left view:nth-child(2) {
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
}

.box_piao_item_h_left view:nth-child(3) {
  font-size: 24rpx;
  font-weight: 400;
  color: #666666;
}

.zbx {
  position: absolute;
  left: 0;
  top: 0;
  width: 10rpx;
  background-color: $color;
  bottom: 0;
}

.zbx.ck {
  background-color: rgb(0, 191, 151);
}

.zbx.cd {
  background-color: #4f76d4;
}
</style>